<template>
  <div class="o-aux-panel" :style="showAnimation">
    <div class="back"></div>
    <div class="front">
      <div class="box">
        <div class="header">
          <span>
            <!-- 新增 -->
            {{ $srv.getI18nByPath('oReportEditor.add') }}
            {{ title }}
          </span>
          <div class="close-btn" @click="close">
            <Icon type="ios-close" />
          </div>
        </div>
        <div class="main">
          <div class="form">
            <o-base-form :mode="2" ref="form"></o-base-form>
          </div>
          <div class="ext">
            <div class="ext-box" v-for="(item, idx) of extForms" :key="idx">
              <div class="ext-title">
                <span>{{ item.title }}</span>
              </div>
              <o-base-form
                :mode="2"
                :config="item.config"
                :ref="'form_' + (idx + 1)"
              ></o-base-form>
            </div>
          </div>
        </div>
        <div class="bottom">
          <Button type="primary" @click="confirm">
            <!-- 确定 -->
            {{ $srv.getI18nByPath('others.ok') }}
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import oBaseForm from '@/components/base/grid/o-base-form/index.vue';
import { Prop, Component, Vue } from 'vue-property-decorator';
import { Tsrv, ifs } from '@/services';

@Component
export default class oModifyBox extends Vue {
  @Prop({
    required: true
  })
  config: any;

  @Prop({
    required: true
  })
  id: string;

  private showAnimation = {};

  private title = '';

  private form = null;

  private formCfg = null;

  private extForms = [];

  private params = [];

  mounted() {
    this.show(this.config);
  }

  private init(data: any) {
    const cfg: any = data.config;
    this.title = Tsrv.getI18nBySrv(cfg.name);
    this.form = this.$refs.form as oBaseForm;
    this.params = [];
    const formItems = [];
    const auxPropItems = [];
    const auxPromises = [];
    cfg.tableColumns.forEach(el => {
      if (el.auxProp && el.auxProp !== '') {
        el.isShow = false;
        auxPropItems.push(el);

        const pattern = new RegExp(/\$\(([^)]*)\)/);
        const fieldName = el.auxProp.match(pattern)[1];
        const fieldValue = data.data[fieldName];

        let guid = null;
        if (data.data['FGUID']) {
          guid = Tsrv.utils.clone(data.data['FGUID']);
          data.data['FGUID'] = Tsrv.utils.getGUID();
        } else {
          data.data['FGUID'] = Tsrv.utils.getGUID();
          guid = data.data['FGUID'];
        }
        const params = {
          id: data.data['id'] || 0,
          fieldName,
          fieldValue: fieldValue || null,
          funName: data.funName,
          guid
        };
        this.params.push(params);
        params['spName'] = '_sys_p_ICItemProp_Open';
        auxPromises.push(
          Tsrv.standardPostReq<ifs.I_setDataRes, any>(params, Tsrv.url.fun)
        );
      }
      formItems.push(el);
    });
    cfg.formColumns = formItems;
    cfg.formStyle = cfg.tableStyle || {};
    cfg.formStyle.columnNum = 2;

    this.form.init(cfg);
    this.form.setModify(true);
    this.form.setFormData(data.data);

    Promise.all(auxPromises).then(result => {
      result.forEach((res, idx) => {
        if (res.data.success) {
          this.extForms.push({
            field: auxPropItems[idx].field,
            title:
              auxPropItems[idx].comment ||
              Tsrv.getI18nBySrv(auxPropItems[idx].field),
            config: {
              formStyle: {
                columnNum: 1
              },
              formColumns: res.data.tableColumns.map(el => {
                el.isShow = true;
                return el;
              })
            }
          });
          this.$nextTick(() => {
            this.extForms.forEach(el => {
              (this.$refs[`form_${idx + 1}`][0] as oBaseForm).setFormData(
                res.data.rows
              );
              (this.$refs[`form_${idx + 1}`][0] as oBaseForm).setModify(true);
            });
          });
        }
      });
    });
  }

  private close() {
    const that = this;
    this.showAnimation = {
      opacity: 0,
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
    setTimeout(() => {
      this.$bus.$emit(`modal_${this.id}`, null);
    }, 200);
  }

  private show(data) {
    const that = this;
    this.showAnimation = {
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
    this.init(data);
    setTimeout(() => {
      that.showAnimation = {
        opacity: 1,
        // 'z-index': 102 + this.id
        'z-index': 202 + this.id
      };
    }, 10);
  }

  private confirm() {
    const auxPromises = [];
    this.extForms.forEach((el, idx) => {
      const rows = (this.$refs[
        `form_${idx + 1}`
      ][0] as oBaseForm).getFilterData({
        hasEmpty: true,
        hasM2o: true
      });
      const params = this.params[idx];
      const row = {};
      rows.forEach(r => {
        row[r.field] = r.value;
      });
      params['rows'] = row;
      params['spName'] = '_sys_p_ICItemProp_Save';
      auxPromises.push(
        Tsrv.standardPostReq<ifs.I_setDataRes, any>(params, Tsrv.url.fun)
      );
    });
    Promise.all(auxPromises).then(result => {
      result.forEach((res, idx) => {
        if (res.data.success) {
          this.form.setFieldValue(this.extForms[idx].field, res.data.data);
        }
      });

      const rowData = this.form.getFilterData({
        hasEmpty: true,
        hasM2o: true
      });

      this.$bus.$emit(`modal_${this.id}`, rowData);
      this.close();
    });
  }
}
</script>

<style scoped lang="scss">
.o-aux-panel {
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  .back {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
  }
  .front {
    position: absolute;
    width: 800px;
    height: 600px;
    top: 50%;
    left: 50%;
    margin: -300px -400px;
    .box {
      width: 100%;
      height: 100%;
      background-color: var(--model-bg-color);
      display: flex;
      flex-direction: column;
      border-radius: var(--border-radius-model);
      overflow: hidden;
      .header {
        width: 100%;
        position: relative;
        height: 48px;
        background-color: rgba(244, 244, 244, 1);
        border-bottom: 1px solid #eee;
        padding: 0 20px;
        z-index: 11;
      }
      .main {
        width: 100%;
        flex: 1;
        overflow: hidden;
        padding: 10px 20px;
        display: flex;
        .form {
          flex: 1;
          .wy-form {
            overflow: auto;
          }
        }
        .ext {
          width: 260px;
        }
      }
      .bottom {
        height: 60px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        background-color: #f4f4f4;
        border-top: 1px solid #eee;
      }
    }
  }
}
.header {
  span {
    font-size: 14px;
    font-weight: bold;
    line-height: 46px;
    color: #666;
  }
  .close-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #666;
    .ivu-icon {
      font-size: 28px;
      font-weight: bold;
    }
  }
}
.ext {
  .ext-box {
    background-color: #f1f1f1;
    padding: 10px 5px;
    .ext-title {
      font-size: 12px;
      font-weight: bold;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 5px;
    }
  }
  ::v-deep.vxe-form {
    background-color: #f1f1f1;
  }
}
</style>
